<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
	src="{{ asset('bundles/imtreporting/js/reporting.js') }}"></script>
<script>
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart5);
google.setOnLoadCallback(drawChart2);
google.setOnLoadCallback(drawChart3);
google.setOnLoadCallback(drawChart4);
function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Appel', {{nbCall}}],
      ['Tache', {{nbTask}}],
      ['Evennement', {{nbEvent}}]
    ]);

    // Set chart options
    var options = {'title':'Repartition par type d\'evennement',
                   'width': {{ tailleEcran }} ,
                   'height':{{ tailleEcran }}/2};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}


function drawChart2() {
	  var data = google.visualization.arrayToDataTable([
    ['Type evnt', 'Nombre evennement'],
    ['Evennement',  {{numberEventPastTime}}],
    ['Appel',  {{numberCallPastTime}}],
    ['Tache',  {{numberTaskPastTime}}]
  ]);

  var options = {
    title: 'Temps passe en heures',
    hAxis: {title: 'Heures', titleTextStyle: {color: 'red'}},
    'width':{{ tailleEcran }},
    'height':{{ tailleEcran }}/2
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

function drawChart3() {
    var data = google.visualization.arrayToDataTable([
      ['Jour', 'Nombre evennement'],
      ['Lun',  {{jourEvent[1]}}],
      ['Mar',  {{jourEvent[2]}}],
      ['Mer',  {{jourEvent[3]}}],
      ['Jeu',  {{jourEvent[4]}}],
      ['Ven',  {{jourEvent[5]}}],
      ['Sam', {{jourEvent[6]}}],
      ['Dim',  {{jourEvent[7]}}]
    ]);

    var options = {
      title: 'Repartition des evennements par jour',
      hAxis: {title: 'Nb', titleTextStyle: {color: 'red'}},
      'width':{{ tailleEcran }},
      'height':{{ tailleEcran }}/2
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
    chart.draw(data, options);
  }

function drawChart4() {
    var data = google.visualization.arrayToDataTable([
      ['Jours', 'Nb'],
      {% for key, valueJour in arrayJour %} 
	    ['{{key}}', {{valueJour}}],	
      {% endfor %}
    ]);

    var options = {
      title: 'Nombre evennement',
      hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}},
        'width':{{ tailleEcran }},
        'height':{{ tailleEcran }}/2
      };
    

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div4'));
    chart.draw(data, options);
  }
  

function drawChart5() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Participe', {{numberParticipating}}],
      ['Ne participe pas', {{numberCanceled}}],
      ['Ne sais pas', {{numberDontKnow}}],
      ['Invite', {{numberInvited}}]
    ]);

    // Set chart options
    var options = {'title':'Participation',
                   'width':{{ tailleEcran }},
                   'height':{{ tailleEcran }}/2};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div5'));
    chart.draw(data, options);
  }

	$('#datedebut').datepicker({
	    prevText: "Précedent",
	    nextText: "Suivant",
	    currentText: "Aujourd\'hui",
	    monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aoüt", "Septembre", "Octobre", "Novembre", "Décembre"],
	    monthNamesShort: ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Jui", "Aou", "Sep", "Oct", "Nov", "Dec"],
	    dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
	    dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
	    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
	    weekHeader: "Wk",
	    dateFormat: "dd/mm/yy"
	});
	
	$('#datefin').datepicker({
	    prevText: "Précedent",
	    nextText: "Suivant",
	    currentText: "Aujourd\'hui",
	    monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aoüt", "Septembre", "Octobre", "Novembre", "Décembre"],
	    monthNamesShort: ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Jui", "Aou", "Sep", "Oct", "Nov", "Dec"],
	    dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
	    dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
	    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
	    weekHeader: "Wk",
	    dateFormat: "dd/mm/yy"
	});
    
</script>


<div id="chart_div"></div>
<div id="chart_div2"></div>						
<div id="chart_div3"></div>
<div id="chart_div4"></div>
<div id="chart_div5"></div>